<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>用户管理</title>
	<link rel="stylesheet" href="../../component/pear/css/pear.css" />
</head>
<body class="pear-container">
<!--查询表单-->
<div class="layui-card">
	<div class="layui-card-body">
		<form class="layui-form" action="">
			<div class="layui-form-item">
				<div class="layui-form-item layui-inline">
					<label class="layui-form-label">用户名</label>
					<div class="layui-input-inline">
						<input type="text" name="name" id="name" placeholder="" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item layui-inline">
					<label class="layui-form-label">性别</label>
					<div class="layui-input-inline">
						<input type="text" name="sex" id="sex" placeholder="" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item layui-inline">
					<label class="layui-form-label">电话</label>
					<div class="layui-input-inline">
						<input type="text" name="phone" id="phone" placeholder="" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item layui-inline">
					<label class="layui-form-label">账号</label>
					<div class="layui-input-inline">
						<input type="text" name="username" id="username" placeholder="" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item layui-inline">
					<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="article-query">
						<i class="layui-icon layui-icon-search"></i>
						查询
					</button>
					<button type="reset" class="pear-btn pear-btn-md">
						<i class="layui-icon layui-icon-refresh"></i>
						重置
					</button>
				</div>
			</div>
		</form>
	</div>
</div>
<!--信息展示表格-->
<div class="layui-card">
	<div class="layui-card-body">
		<table id="user-table" lay-filter="user-table"></table>
	</div>
</div>

<!--添加-->
<div style="display: none" id="Adds">
	<form class="layui-form" action="" lay-filter="addForm">
		<input type="hidden" name="uid">
		<div class="mainBox">
			<div class="main-container">
				<div class="main-container">
					<div class="layui-form-item" >
						<label class="layui-form-label">ID</label>
						<div class="layui-input-block">
							<input name="id" id="add_id" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">账号</label>
						<div class="layui-input-block">
							<input type="text" name="username" id="add_username" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">姓名</label>
						<div class="layui-input-block">
							<input type="text"  name="name" id="add_name" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">邮箱</label>
						<div class="layui-input-block">
							<input type="text"  name="email" id="add_email" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">备注</label>
						<div class="layui-input-block">
							<input type="text"  name="beizhu" id="add_beizhu" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">密码</label>
						<div class="layui-input-block">
							<input type="text"  name="password" id="add_password" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">电话</label>
						<div class="layui-input-block">
							<input type="text"  name="phone" id="add_phone" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">性别</label>
						<div class="layui-input-block" id="add_sex">
							<input type="radio" name="sex" id="sex3" value="男" title="男">
							<input type="radio" name="sex" id="sex4" value="女" title="女" checked>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">爱好</label>
						<div class="layui-input-block">
							<select name="status" lay-filter="required" id="add_status">
								<option value=""></option>
<!--								<option value="0">写作</option>-->
<!--								<option value="1">阅读</option>-->
<!--								<option value="2">游戏</option>-->
<!--								<option value="3">音乐</option>-->
<!--								<option value="4">旅行</option>-->
							</select>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="bottom">
			<div class="button-container">
				<button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit="" lay-filter="formDemos">
					<i class="layui-icon layui-icon-ok"></i>
					提交
				</button>
				<button type="reset" class="pear-btn pear-btn-sm">
					<i class="layui-icon layui-icon-refresh"></i>
					重置
				</button>
			</div>
		</div>
	</form>
</div>
<!--修改   组件-->
<div style="display: none" id="showAdd">
	<form class="layui-form" action="" lay-filter="addForm">
		<input type="hidden" name="uid">
		<div class="mainBox">
			<div class="main-container">
				<div class="main-container">
					<div class="layui-form-item" style="display: none">
						<label class="layui-form-label">ID</label>
						<div class="layui-input-block">
							<input type="hidden" name="id" id="update_id" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">账号</label>
						<div class="layui-input-block">
							<input type="text" name="username" id="update_username" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">姓名</label>
						<div class="layui-input-block">
							<input type="text"  name="name" id="update_name" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">邮箱</label>
						<div class="layui-input-block">
							<input type="text"  name="email" id="update_email" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">密码</label>
						<div class="layui-input-block">
							<input type="text"  name="password" id="update_password" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">电话</label>
						<div class="layui-input-block">
							<input type="text"  name="phone" id="update_phone" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">性别</label>
						<div class="layui-input-block" id="update_sex">
							<input type="radio" name="sex" id="sex1" value="男" title="男">
							<input type="radio" name="sex" id="sex2" value="女" title="女" checked>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">身份</label>
						<div class="layui-input-block">
							<select name="status" lay-filter="required" id="update_status">
								<option value=""></option>
<!--								<option value="超级管理员">超级管理员</option>-->
<!--								<option value="管理员">管理员</option>-->
<!--                                <option value="普通用户用户">普通用户用户</option>-->
<!--								<option value="嘎子">嘎子</option>-->
<!--								<option value="潘子">潘子</option>-->
							</select>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="bottom">
			<div class="button-container">
				<button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit="" lay-filter="formDemo">
					<i class="layui-icon layui-icon-ok"></i>
					提交
				</button>
				<button type="reset" class="pear-btn pear-btn-sm">
					<i class="layui-icon layui-icon-refresh"></i>
					重置
				</button>
			</div>
		</div>
	</form>
</div>

<!--新增 ，批量删除按钮组件-->
<script type="text/html" id="user-toolbar">
	<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
		<i class="layui-icon layui-icon-add-1"></i>
		新增
	</button>
	<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
		<i class="layui-icon layui-icon-delete"></i>
		删除
	</button>
</script>
<!--修改，删除按钮-->
<script type="text/html" id="user-bar">
	<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
	<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
</script>
<!--启用禁用组件-->
<script type="text/html" id="user-enable">
	<input type="checkbox" name="enable"  value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="user-enable"
		   {{d.close==1?'checked':''}}>
</script>
<!--时间格式化组件-->
<script type="text/html" id="user-createTime">
	{{layui.util.toDateString(d.createTime, 'yyyy-MM-dd')}}
</script>

<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
	layui.use(['table', 'form', 'jquery','common'], function() {
		let table = layui.table;
		let form = layui.form;
		let $ = layui.jquery;
		let common = layui.common;

		let MODULE_PATH = "operate/";

		let cols = [
			[{
				type: 'checkbox'
			},
				{
					title: '序号',
					field: 'id',
					align: 'center',
					width: 100
				},
				{
					title: '账号',
					field: 'username',
					align: 'center',
					width: 100
				},
				{
					title: '姓名',
					field: 'name',
					align: 'center'
				},
				{
					title: '性别',
					field: 'sex',
					align: 'center',
					width: 80,
					templet: '#user-sex'
				},
				{
					title: '电话',
					field: 'phone',
					align: 'center'
				},
				{
					title: '启用',
					field: 'close',
					align: 'center',
					templet: '#user-enable'
				},

				{
					title: '注册日期',
					field: 'created',
					align: 'center',
					templet: '#user-createTime',
					sort: true
				},
				{
					title: '备注',
					field: 'beizhu',
					align: 'center'
					//   templet: '#user-createTime'
				},

				{
					title: '操作',
					toolbar: '#user-bar',
					align: 'center',
					width: 130
				}
			]
		]





        //查找监控提交
        form.on('submit(article-query)', function (data) {
            // console.log(created);
            data.field.page=1;
            data.field.limit=5;
            $.ajax({
                url: 'http://localhost/getlist',
                data: data.field,
                dataType: "json",
                type: "GET",
                success: function (d) {
                    table.reload('user-table', {
                        where: { //设定异步数据接口的额外参数，任意设
							name: data.field.name
                            , sex: data.field.sex
                            , phone: data.field.phone
							,username:data.field.username
                        }
                        , page: {
                            curr: 1 //重新从第 1 页开始
                        }
                    }); //只重载数据
                }

            })


            console.log(data.field)
            // layer.alert(JSON.stringify(data.field), {
            //     title: '最终的提交信息'
            // })
            return false;
        });

		table.render({
			elem: '#user-table',
			url: 'http://localhost/getlist',
			page: true,
			cols: cols,
			skin: 'line',
			limit:2,
			limits:[2,4,6,8,10],
			toolbar: '#user-toolbar',
			defaultToolbar: [{
				title: '刷新',
				layEvent: 'refresh',
				icon: 'layui-icon-refresh',
			}, 'filter', 'print', 'exports']
		});

		table.on('tool(user-table)', function(obj) {
			if (obj.event === 'remove') {
				window.remove(obj);
			} else if (obj.event === 'edit') {
				window.edit(obj);
			}
		});

		table.on('toolbar(user-table)', function(obj) {
			if (obj.event === 'add') {
				window.add();
			} else if (obj.event === 'refresh') {
				window.refresh();
			} else if (obj.event === 'batchRemove') {
				window.batchRemove(obj);
			}
		});

		//下拉框动态赋值
		$.ajax({
			type:"GET",
			url: "http://localhost/getquan",
			datatype: "json",
			success:function (d) {
				console.log(d);
				$.each(d.data,function (index, item) {
					$("#update_status").append(new Option(item.rolename,item.id));//往下拉菜单里添加元素
					$("#add_status").append(new Option(item.rolename,item.id));//往下拉菜单里添加元素
				})
				form.render("")
			}
		})

		form.on('submit(user-query)', function(data) {
			table.reload('user-table', {
				where: data.field
			})
			return false;
		});

		form.on('switch(user-enable)', function(data) {
			if (data.elem.checked){
				close = 1
			}else {
				close = 0
			}
			$.ajax({
				url: "http://localhost/updateclose",
				data:{"close":close,"id":data.elem.value},
				success:function (d) {
					document.getElementById("msg").innerText=d.msg

					window.location.href="/abc"
				}

			})
			layer.msg(data.elem.checked);//开关是否开启，true或者false
		});

		let index = 0;
		window.add = function() {
			var data = data //获得当前行数据
					,layEvent = event; //获得 lay-event 对应的值
			var form = layui.form;
			layer.open({
				type: 1,
				title: '文章添加',
				area: ['500px', '500px'],
				anim: 5,
				resize: false,
				content: $("#Adds")
			});

			//表单提交
			form.on('submit(formDemos)', function(data){
				$.ajax({
					url:"http://localhost/insert",
					data:data.field,
					dataType:"json",
					type:"POST",
					success:function (d) {
						document.getElementById("msg").innerText=d.msg

						window.location.href="/abc"

					}
				})
			});
		}



		window.edit = function(obj) {
			var data = obj.data //获得当前行数据
					,layEvent = obj.event; //获得 lay-event 对应的值
			var form = layui.form;
			//$.get(totalUrl+'selectOne', {uid:obj.data.uid}, function(obj1){
			$.post('http://localhost/tanchuid/'+data.id,{}, function(str){
				layer.open({
					type: 1,
					title: '文章修改',
					area: ['500px', '600px'],
					anim: 5,
					resize:false,
					// offset:'t',
					//content: "内容:"+str.data.content //注意，如果str是object，那么需要字符拼接。
					content: $('#showAdd')
				});

				$("#update_username").val(str.data.username)
				$("#update_id").val(str.data.id)
				$("#update_name").val(str.data.name)
				$("#update_email").val(str.data.email)
				// var created2 = layui.util.toDateString(str.data.created, 'yyyy-MM-dd');
				// $("#created").text(created2)
				$("#update_email").val(str.data.email)
				$("#update_status").val(str.data.status)
				$("#update_password").val(str.data.password)
				$("#update_phone").val(str.data.phone)
				$("[value="+str.data.sex+"]").prop("checked",true);
				form.render();

			});
			form.on('submit(formDemo)', function(data){
				$.ajax({
					url:"http://localhost/update",
					data:data.field,
					dataType:"json",
					type:"POST",
					success:function (d) {
						document.getElementById("msg").innerText=d.msg
						window.location.href="/abc"
					}
				})

			});
		}

		window.remove = function(obj) {
			var data = obj.data //获得当前行数据
					,layEvent = obj.event; //获得 lay-event 对应的值
			var form = layui.form;
			layer.confirm('真的删除行么', function (index) {
				$ = layui.jquery
				$.ajax({
					url: "http://localhost/delete",
					data: {"id": data.id},
					datatype: "json",
					type: "GET",
				})
				obj.del(); //删除对应行（tr）的DOM结构
				layer.close(index);
				//向服务端发送删除指令
			});
		}

		window.batchRemove = function(obj) {

			var checkStatus = table.checkStatus(obj.config.id)
					,data = checkStatus.data; //获取选中的数据
			if (data.length === 0) {
				layer.msg('请选择一行');
			} else {
				var arr = new Array();
				for (var i = 0; i < checkStatus.data.length; i++) {
					arr.push(checkStatus.data[i].id);
				}
				$.ajax({
					url: 'http://localhost/Bydelete'
					, data: {"ids": arr}
					, traditional: true  //如果向后台传输数组或者list的对象的时候要深度序列化
					, success: function (z) {
						if (z.data > 0) {
							table.reload('user-table')
						}
					}

				})
			}
		}

		window.refresh = function(param) {
			table.reload('user-table');
		}
	})
</script>
</body>
</html>
